<template>
  <div :style="{padding:'10px','margin-left': ml+'px'}">
    <div v-if="!params.fixed" :style="{width:width + 'px'}">
     <vxe-grid
        ref="vxeTable"
        :columns="renderOpts.props? renderOpts.props.columns: []"
        v-bind="renderOpts.props? renderOpts.props.attrs: {}"
        :data="dataSource"
        :loading="loading"
      >
      </vxe-grid>
    </div>
    <div v-else :style="{height:height+ 'px'}"></div>
  </div>
</template>

<script>
import { getAction } from '@/services/manage'
export default {
  name: 'VxeExpendTable',
  props: {
    value: [String, Number],
    params: {
      type: Object,
      default: () => {
        return {
          load: false
        }
      }
    },
    renderOpts: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      dataSource: [],
      height: 0,
      width: 0,
      url: '',
      loading: false,
      unwatch: '',
      ml: 0
    }
  },
  methods: {
    loadData() { // 根据url请求数据
      this.loading = true
      if (window.own && window.own.vxeExpendTableLoad) {
        return window.own.vxeExpendTableLoad
      }
      const load = new Promise((resolve, reject) => {
        getAction(this.url).then(res => {
          if (res.success) {
            resolve(res)
          } else {
            reject(res)
          }
        }).finally(() => {
          this.loading = false
          window.own = {
            VxeExpendTableLoad: false
          }
        })
      })
      window.own = {
        vxeExpendTableLoad: load
      }
      return load
    },
    setHeight() {
      const { $table } = this.params
      this.height = $table.$refs.tableBody?.$refs.table.clientHeight - $table.$refs.rightBody?.$refs.table.clientHeight
    },
    setWidth() {
      const { $table } = this.params
      this.$nextTick(() => {
        const columns = $table.getColumns()
        let fixedWidth = 0
        this.ml = 0
        columns.forEach(item => {
          if (item.fixed) {
            fixedWidth += item.width
          }
          if (item.fixed === 'left') { // 左固定时，修复内嵌表格被遮挡
            this.ml += item.width
          }
        })
        // 去除列浮动占用宽度
        const tableWidth = $table.$el.clientWidth
        this.width = tableWidth - fixedWidth - 20
      })
    },
    init() {
      this.loadData().then(res => {
        if (this.params.fixed) {
          setTimeout(() => {
            this.setHeight()
          })
        } else {
          this.dataSource = res.result
        }
      })
    },
    clearRowExpandLoaded() {
      const { $table } = this.params
      // 清空懒加载缓存状态
      const expandRow = $table.getRowExpandRecords()
      expandRow[0] && $table.clearRowExpandLoaded(expandRow[0])
    }
  },
  async mounted() {
    const { $table, row } = this.params
    const { props } = this.renderOpts
    if (props.dataSource) { // 懒加载或者不需要组件请求数据
      if (typeof props.dataSource === 'function') {
        this.dataSource = await props.dataSource({ $table, row })
      } else {
        this.dataSource = props.dataSource
      }
      setTimeout(() => {
        this.setHeight()
        this.setWidth()
      }, 60)
      return
    }

    // 根据url请求数据
    if (props.url && typeof props.url === 'function') {
      this.url = await props.url({ $table, row })
    }
    this.init()
    this.setWidth()
  },
  created() {
    const { props } = this.renderOpts
    props.clearRowExpandLoaded && this.clearRowExpandLoaded()
  }
}
</script>
